import React, { useState } from 'react';
import { format, addMonths, subMonths } from 'date-fns';
import { Calendar } from './components/Calendar';
import { TodoList } from './components/TodoList';
import { DayInformation } from './components/DayInformation';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { useCalendarData } from './hooks/useCalendarData';
import { useAlmanacData } from './hooks/useAlmanacData';

function App() {
  const [currentDate, setCurrentDate] = useState(new Date());
  const [selectedDate, setSelectedDate] = useState(new Date());
  const { calendarData, addTodo, toggleTodo, deleteTodo } = useCalendarData();
  const { almanacData, isLoading } = useAlmanacData(selectedDate);

  const selectedDateStr = format(selectedDate, 'yyyy-MM-dd');
  const selectedDayData = calendarData[selectedDateStr] || {
    date: selectedDate,
    todos: [],
    dayInfo: {
      lunar: almanacData ? `${almanacData.LMonth}${almanacData.LDay}` : '',
      fortune: ''
    }
  };

  return (
    <div className="min-h-screen bg-gray-100 p-4">
      <div className="max-w-6xl mx-auto space-y-4">
        <div className="flex items-center justify-between bg-white p-4 rounded-lg shadow">
          <button
            onClick={() => setCurrentDate(prev => subMonths(prev, 1))}
            className="p-2 hover:bg-gray-100 rounded-lg"
          >
            <ChevronLeft />
          </button>
          
          <h1 className="text-2xl font-bold">
            {format(currentDate, 'yyyy年MM月')}
          </h1>
          
          <button
            onClick={() => setCurrentDate(prev => addMonths(prev, 1))}
            className="p-2 hover:bg-gray-100 rounded-lg"
          >
            <ChevronRight />
          </button>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
          <div className="lg:col-span-2">
            <Calendar
              currentDate={currentDate}
              selectedDate={selectedDate}
              calendarData={calendarData}
              onSelectDate={setSelectedDate}
            />
          </div>
          
          <div>
            <TodoList
              date={selectedDate}
              todos={selectedDayData.todos}
              onToggleTodo={(id) => toggleTodo(selectedDate, id)}
              onAddTodo={(content) => addTodo(selectedDate, content)}
              onDeleteTodo={(id) => deleteTodo(selectedDate, id)}
            />
            
            <DayInformation
              date={selectedDate}
              almanacData={almanacData}
              isLoading={isLoading}
            />
          </div>
        </div>
      </div>
    </div>
  );
}

export default App